<template>
  <div id="LoginLayout">
    <div class="login-box" :class="{visible : loginVisiable}">
      <div class="login_box_row">
        <div class="login_badge">
          <h1 >欢迎登录</h1>
        </div>
        <Form ref="loginForm" :model="user" :rules="userRule">
          <Form-Item prop="username" class="login-input-container">
            <Input type="text" v-model="user.username" placeholder="用户名/手机号">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-Item>
          <Form-item prop="password" class="login-input-container">
            <Input type="password" placeholder="密码" v-model="user.password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <div class="login-input-container">
            <Button  @click="handleSubmit('loginForm')" >
              登录
              <Icon type="log-in"></Icon>
            </Button>
            <a @click="loginVisiable = !loginVisiable">新用户注册</a>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    components: {},
    name: 'login',
    data: function () {
      return {
        user: {
          username: '',
          password: ''
        },
        userRule: {
          username: [
            {required: true, message: '请填写正确的用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ]
        },
        loginVisiable: true
      }
    },
    computed: {
      ...mapGetters({
        isLogon: 'isLogon',
        isLogoff: 'isLogoff'
      })
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let formData = JSON.stringify(this.user)
            this.$http.post('/login', formData).then((response) => {
              // success callback
              if (response.data.code === 200) {
                this.$Message.success('登录成功')
                this.$store.dispatch('initUser', this.user)
                this.$router.replace({path: '/'})
              } else {
                this.$Message.error(response.data.msg)
              }
            }, (response) => {
              // error callback
              this.$Message.error(response.data.message)
            })
          } else {
            this.$Message.error('请正确填写用户名密码!')
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #LoginLayout {
    display: flex;
    display: -webkit-flex; /* safari */
    flex-direction: row;
    justify-content: center;
    background: #f5f7f9;
    align-items: center;
    height: 100%;
  }

  .login-box, .reg_box {
    position: fixed;
    margin-top: 30px;
    width: 50%;
    display: block;
    min-height: 300px;
    background: #fff;
    border-radius: 5px;
    transform: scale(0, 1) translate(-150px);
    visibility: hidden;
  }

  .login_box_row, .reg_box_row {
    margin-bottom: 16px;
    margin-top: 16px;
    flex-direction: row;
    justify-content: center;
  }

  .login_badge h1, .reg_badge h1 {
    background-position: center top 15px;
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    letter-spacing: 3px;
    margin-top: 0;
    padding: 40px 10px 40px;
    text-transform: uppercase;
    text-align: center;
  }

  .login-input-container, .reg-input-container {
    margin: 25px;
    padding: 2px;
    position: relative;
  }
  .login-input-container a, .reg-input-container a {
    margin-left: 10px;
  }
  .visible {
    position: relative;
    transform: scale(1, 1) translate(0px);
    transition: -webkit-transform 0.3s ease 0s;
    visibility: visible;
    z-index: auto;
  }

</style>
